@extends('layouts.console_header')

@section('title', '创建红包活动')

@section('resources')
    @parent
    <!-- css 文件 -->
    <style>
        .red_envelope_title li{overflow: hidden;margin: 20px;}
        .red_envelope_title li span{float: left;height: 30px;line-height: 30px;}
        .red_envelope_title li input{float: left;border: 1px solid #000;height: 20px;width: 300px;padding: 4px;margin: 0 5px;}
        .red_envelope_title li select{float: left;border: 1px solid #000;height: 30px;width: 200px;margin: 0 5px;}
        .set_red_envelope .title{border-left: 3px solid #9955c6;padding: 0px 15px;margin: 10px 0;}
        /*.red_envelope li{overflow: hidden;}*/
        .red_envelope li p{overflow: hidden;margin: 20px 38px;}
        .red_envelope li .red_title{overflow: hidden;background-color: #eee;margin: 10px 18px;padding-left: 20px;}
        .red_envelope li p span{float: left;margin-right: 20px;height: 30px;line-height: 30px;font-size: 16px;}
        .red_envelope li p select{float: left;border: 1px solid #000;width: 200px;height: 30px;}
        .red_envelope li p input{float: left;border: 1px solid #000;height: 20px;width: 190px;padding: 4px;}
        .add_red_envelope{width: 100px;height: 30px;border-radius: 5px;color: #9955c6;float: left;margin-right: 20px;margin-left: 20px;border: 1px solid #9955c6;background-color: #fff;}
        .preserve_red_envelope{width: 150px;height: 40px;background-color: #9955c6;border-radius: 5px;color: #fff;float: right;margin-right: 20px;font-size: 20px;}
        .cancel_red_envelope{width: 150px;height: 40px;background-color: #999;border-radius: 5px;color: #fff;float: left;margin-right: 20px;font-size: 20px;}
        .button{margin: 50px 20px;overflow: hidden;}
    </style>
@endsection

@section('content')
<!--  html内容  -->
<section class="user_list">
    <p class="fz_14 account_title">
        <span style="color: #7f7f7f;"><a href="/console/index">首页</a>>系统设置><a href="/console/user/red/envelope">红包管理</a>></span><span class="co_violet">创建红包活动</span>
    </p>
    <form action="" method="" class="set_red_envelope">
        <ul class="red_envelope_title">
            <li>
                <span>活动名称：</span>
                <input type="text" name="" value="">
            </li>
            <li>
                <span>投放地区：</span>
                <select name="" id="">
                    <option value="">武汉</option>
                    <option value="">南昌</option>
                </select>
            </li>
            <li>
                <span>投放用户：</span>
                <select name="" id="">
                    <option value="">所有用户</option>
                    <option value="">0充值用户</option>
                    <option value="">近30天未充值用户</option>
                    <option value="">近15天未充值用户</option>
                    <option value="">近7天未充值用户</option>
                    <option value="">0消费用户</option>
                    <option value="">近30天未消费用户</option>
                    <option value="">近15天未消费用户</option>
                    <option value="">近7天未消费用户</option>
                </select>
            </li>
            <li>
                <span>投放位置：</span>
                <select name="" id="">
                    <option value="">请选择</option>
                    <option value="">首页</option>
                    <option value="">充值完成</option>
                    <option value="">h5活动</option>
                </select>
                <input style="margin-left: 20px;" type="text" name="" value="" placeholder="请输入h5活动链接">
            </li>
            <li>
                <span>红包方式：</span>
                <select name="" id="">
                    <option value="">拼手气红包-用户分享多人领取</option>
                    <option value="">普通红包-仅用户本人领取</option>
                </select>
            </li>
            <li>
                <span>活动时间：</span>
                <input type="date" name="" value="">
                <span>-</span>
                <input type="date" name="" value="">
            </li>
        </ul>
        <p class="title">普通红包</p>
        <ul class="red_envelope"> 
            <li>
                <p class="red_title">
                    <span style="font-size: 18px;">红包1</span>
                    <span style="color: #808080;font-size: 14px;">红包预计投放金额：1080</span>
                </p>
                <p>
                    <span>红包类型</span>
                    <select name="" id="">
                        <option value="">无限制红包</option>
                        <option value="">满减红包</option>
                    </select>
                </p>
                <p>
                    <span>红包面额</span>
                    <input type="text" name="" value="" placeholder="请输入单个红包的金额">
                </p>
                <p>
                    <span>红包数量</span>
                    <input type="text" name="" value="" placeholder="请输入投放红包总数">
                </p>
                <p>
                    <span>满减限制</span>
                    <input type="text" name="" value="" placeholder="请输入满减金额要求">
                    <span>可用</span>
                </p>
                <p>
                    <span>品类限制</span>
                    <select name="" id="">
                        <option value="">不限制</option>
                        <option value="">限美食品类使用</option>
                        <option value="">限休闲娱乐品类使用</option>
                        <option value="">限生活服务品类使用</option>
                        <option value="">限酒店品类使用</option>
                    </select>
                </p>
            </li>
        </ul>
        <p class="oh">
            <input class="add_red_envelope" type="button" name="" value="添加红包">
            <span class="add_red_envelope_prompt" style="float: left;color: #808080;font-size: 14px;margin-top: 10px;">每个用户单次活动中最多可领取5个红包</span>
        </p>
        <p class="button">
            <input class="cancel_red_envelope" type="button" name="" value="取消">
            <input class="preserve_red_envelope" type="button" name="" value="保存">
        </p>
    </form>
</section>
@endsection

@section('scriptResources')
    @parent
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
<script>
    $(".add_red_envelope").click(function(){
        var red_number = $(".red_envelope li").length;
        if(red_number < 5){
            red_number += 1;
            var lis = $('<li>'+
                '<p class="red_title">'+
                    '<span style="font-size: 18px;">红包'+red_number+'</span>'+
                    '<span style="color: #808080;font-size: 14px;">红包预计投放金额：1080</span>'+
                '</p>'+
                '<p>'+
                    '<span>红包类型</span>'+
                    '<select name="" id="">'+
                        '<option value="">无限制红包</option>'+
                        '<option value="">满减红包</option>'+
                    '</select>'+
                '</p>'+
                '<p>'+
                    '<span>红包面额</span>'+
                    '<input type="text" name="" value="" placeholder="请输入单个红包的金额">'+
                '</p>'+
                '<p>'+
                    '<span>红包数量</span>'+
                    '<input type="text" name="" value="" placeholder="请输入投放红包总数">'+
                '</p>'+
                '<p>'+
                    '<span>满减限制</span>'+
                    '<input type="text" name="" value="" placeholder="请输入满减金额要求">'+
                    '<span>可用</span>'+
                '</p>'+
                '<p>'+
                    '<span>品类限制</span>'+
                    '<select name="" id="">'+
                        '<option value="">不限制</option>'+
                        '<option value="">限美食品类使用</option>'+
                        '<option value="">限休闲娱乐品类使用</option>'+
                        '<option value="">限生活服务品类使用</option>'+
                        '<option value="">限酒店品类使用</option>'+
                    '</select>'+
                '</p>'+
            '</li>');
            $('.red_envelope').append(lis);
        }else{
            $(".add_red_envelope_prompt").css({"color":"red","font-size": "18px","margin-top": "2px"})
        }
    })
</script>

@endsection